<template>
	<div>
		<el-form :inline="true" :model="stoneQueryForm" size="small">
			<el-form-item>
				<el-col :span="11">
				  <el-date-picker type="date" placeholder="开始日期" 
				  v-model="stoneQueryForm.stoneStartDate" style="width: 100%;" 
				  format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
				</el-col>
				<el-col class="line" :span="2">-</el-col>
				<el-col :span="11">
				  <el-date-picker type="date" placeholder="结束日期" 
				  v-model="stoneQueryForm.stoneEndDate" style="width: 100%;" 
				  format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item>
				<el-input v-model="stoneQueryForm.customerName" placeholder="客户"></el-input>
			</el-form-item>
		  <el-form-item>
		    <el-input v-model="stoneQueryForm.carNum" placeholder="车牌号"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-input v-model="stoneQueryForm.carOwner" placeholder="车主"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-input v-model="stoneQueryForm.loadAddr" placeholder="装货地"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-input v-model="stoneQueryForm.unloadAddr" placeholder="卸货地"></el-input>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="query">查询</el-button>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="exportExcelForStone">导出</el-button>
		  </el-form-item>
		  <el-form-item>
			  <el-button type="text" @click="dialogVisible = true">导入文件</el-button>
			  
			
		  </el-form-item>
		  
		</el-form>
		
		<!--弹出导入文件的页面-->
		<el-dialog
		  title="上传文件"
		  :visible.sync="dialogVisible"
		  width="30%">
		  
		  <el-upload
		    ref="upload" 
			name="stoneFile"
		    :action="uploadTransferExcelUrl"
		    :file-list="fileList"
			:multiple="false"
			:limit="1"
			:accept="accept"
			:on-success="successFunc"
			:on-error="errorFunc"
		    :auto-upload="false">
		    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
		    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"> {{importDataBtnText}}</el-button>
		    <div slot="tip" class="el-upload__tip">只能上传 EXCEL 格式</div>
		  </el-upload>
		</el-dialog>
		
		
		<el-table
			size='medium' 
		   :data="tableData"
		   :max-height="tableHeight"
		   border
		   style="width: 100%">
		   
		  <el-table-column
		        fixed="left"
		        label="操作"
		        width="50">
		        <template slot-scope="scope">
		          <el-button @click="editTransferFunc(scope.row)" type="text" size="small">编辑</el-button>
		        </template>
		      </el-table-column>
		   
		   <el-table-column 
			 v-if="false"
		     prop="id"
		     label="index">
		   </el-table-column>
		   <el-table-column  
		     prop="transportDate"
		     label="运输日期">
		   </el-table-column>
		   <el-table-column
		     prop="customerName"
		     label="客户名称">
		   </el-table-column>
		   <el-table-column
		     prop="loadAddr"
		     label="装货地">
		   </el-table-column>
		   <el-table-column
		     prop="unloadAddr"
		     label="卸货地">
		   </el-table-column>
		   <el-table-column
		     prop="replaceCarNum"
		     label="代车号">
		   </el-table-column>
		   <el-table-column
		     prop="carNum"
		     label="车牌号">
		   </el-table-column>
		   <el-table-column
		     prop="goodsName"
		     label="货物名称">
		   </el-table-column>
		   <el-table-column
		     prop="transportWeight"
		     label="运输重量">
		   </el-table-column>
		   <el-table-column
		     prop="transportUnitPrice"
		     label="运输单价">
		   </el-table-column>
		   <el-table-column
		     prop="transportAmount"
		     label="运输金额">
		   </el-table-column>
		   
		   <el-table-column
		     prop="inWeight"
		     label="入库吨位">
		   </el-table-column>
		   <el-table-column
		     prop="customerUnitPrice"
		     label="客户单价">
		   </el-table-column>
		   <el-table-column
		     prop="receiveAmount"
		     label="应收金额">
		   </el-table-column>
		   
		   <el-table-column
		     prop="outWeight"
		     label="出库吨位">
		   </el-table-column>
		   <el-table-column
		     prop="outUnitPrice"
		     label="出库单价">
		   </el-table-column>
		   <el-table-column
		     prop="outAmount"
		     label="出库金额">
		   </el-table-column>

		   
		   <el-table-column
		     prop="charterPrice"
		     label="包车费用">
		   </el-table-column>
		   <el-table-column
		     prop="otherPrice"
		     label="其他费用">
		   </el-table-column>
		   <el-table-column
		     prop="rebates"
		     label="回扣">
		   </el-table-column>
		   <el-table-column
		     prop="settlement"
		     label="结算方式">
		   </el-table-column>
		   <el-table-column
		     prop="remark"
		     label="备注">
		   </el-table-column>
		   <el-table-column
		     prop="carOwner"
		     label="车主">
		   </el-table-column>
		 </el-table>
		
		
		
	</div>
</template>

<script>
	import request from '../../../api/request.js'
	import { ObjToFormData } from '../../../util/commonUtil.js';
	import {PRE_URL}from '../../../util/constants.js'
	import RoutePaths from '../../../util/constants.js'  //引用模块进来
	
	
	
	export default{
		name:RoutePaths.ROUTE_BASE_STONE_NAME,
		data() {
		  return {
			stoneQueryForm: {
				stoneStartDate:'',
				stoneEndDate:'',
				customerName: '',
				carNum: '',
				carOwner: '',
				loadAddr: '',
				unloadAddr: ''
			},
			//上传路径
			uploadTransferExcelUrl:"/api/stone/uploadStone",
			//显示的文件列表
			fileList:[],
			//文件上传状态显示
			importDataBtnText:'点击上传',
			//接收文件类型
			accept:".xls,.xlsx",
			dialogVisible:false,
			tableHeight: window.innerHeight - 300,
			tableData: []
		  }
		},
		mounted () {

		},
		methods: {
			//点击上传文件到服务器
			submitUpload(){
				this.$refs.upload.submit();
			},
			//上传成功的方法
			successFunc(response, file, fileList){
				this.commonUtil.showMessage("1",response.message);
				this.fileList = [];
			},
			//上传失败的方法
			errorFunc(err, file, fileList){	
				
				this.commonUtil.showMessage("0",err);
				this.fileList = [];
			},
			
			exportExcelForStone(){
				
			},
			query(){

				var form  = ObjToFormData(this.stoneQueryForm);
				var me = this;
				
				request.post('/api/stone/listStone',
					form).then(
					response => {
						const result = response.data;
						// 查询结果
						this.tableData = result;
				
					})
				

			}
		}
		
	}
</script>

<style>
</style>
